<template>
	<!-- 地区姓氏 -->
	<view class="province">
		<!-- 字母选择 -->
		<view class="nofind">没找到自己的姓氏？没关系，<view class="tocall" @tap.stop="tocall">请联系我们</view></view>
		<view class="letter_choice">
			<view id="my_list" class="letter_choice" @touchstart="touchStart" @touchmove.stop.prevent="touchMove" @touchend.stop="touchEnd">	
				<view class="choice_a" v-for="(item,index) in letter_list" :key="index" id="city_list_main"
					:data-letter="item.name" 
					:data-index="index" 
					:class="{active:character==index}" 
					@tap="onLetter"
					style="font-size: 26upx;">{{item.name}}	
					<view class="bubble" :class="{isshow:touch}" >
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<!-- 提示字母弹窗 -->
		<block v-if="isShowLetter">
			<view class="letter_prompt">
				{{showLetter}}
			</view>
		</block>
		
		<scroll-view style="height:120vh" class="scroll_city" :scroll-y="true" 
			:scroll-into-view="scrollTopId" :scroll-top="scrollTop" @touchmove.stop.prevent>

			<!-- 信息 -->
			<view class="letter_info" v-for="(item,index) in city_list_main" :key="index">
				<view class="letter_title" v-if="(item.length!=0)" :id="index">{{index}}</view>
				<view class="letter_name_list" v-for="(items,indexs) in item" :key="indexs">
					<view class="letter_name" @tap="bindcitys(items)">{{items.Surname}}</view>
				</view>
			</view>
		</scroll-view>

		
	</view>
</template>

<script>
	import {
		surnameList
	} from "@/utils/api/zupu.js";
	import {
		mapState
	} from "vuex"
	import {updateUserinfo} from "@/utils/api/user.js";
	import {checkPermission} from "@/utils/yicode"
	export default {
		data() {
			return {
				letter_list: [{
						name: "A"
					},
					{
						name: "B"
					},
					{
						name: "C"
					},
					{
						name: "D"
					},
					{
						name: "E"
					},
					{
						name: "F"
					},
					{
						name: "G"
					},
					{
						name: "H"
					},
					{
						name: "I"
					},
					{
						name: "J"
					},
					{
						name: "K"
					},
					{
						name: "L"
					},
					{
						name: "M"
					},
					{
						name: "N"
					},
					{
						name: "O"
					},
					{
						name: "P"
					},
					{
						name: "Q"
					},
					{
						name: "R"
					},
					{
						name: "S"
					},
					{
						name: "T"
					},
					{
						name: "U"
					},
					{
						name: "V"
					},
					{
						name: "W"
					},
					{
						name: "X"
					},
					{
						name: "Y"
					},
					{
						name: "Z"
					}
				],
				showLetter: "",
				isShowLetter: false,
				isMove:false,//判断是否滑动
				cityList: [], //列表
				Letter_id: [], //字母
				city_list_main: {
					A: [],
					B: [],
					C: [],
					D: [],
					E: [],
					F: [],
					G: [],
					H: [],
					I: [],
					J: [],
					K: [],
					L: [],
					M: [],
					N: [],
					O: [],
					P: [],
					Q: [],
					R: [],
					S: [],
					T: [],
					U: [],
					V: [],
					W: [],
					X: [],
					Y: [],
					Z: [],
				},
				touch: false,
				scrollTop: 0,
				scrollTopId: "",
				winHeight: 0,
				itemHeight: 0,
				winOffsetY: 0,
				character: "",
				city_id: "", //pid
				area_id: "", //区县id
				
				source:1,//1普通选择  2直接设置姓氏
				
			}
		},
		computed: mapState({
			
		}),
		onLoad(options) {
			this.source = options.source?options.source:1;//来源
			this.getAddressListfun();
		},
		
		methods: {
			setList() {
				uni.createSelectorQuery()
					.in(this)
					.select('#my_list')
					.boundingClientRect()
					.exec(ret => {
						this.winOffsetY = ret[0].top
						this.winHeight = ret[0].height
						this.itemHeight = this.winHeight / this.letter_list.length
					})
			},
			onLetter(e) {
				var showLetter = e.currentTarget.dataset.letter;
				this.showLetter = showLetter; //所点击的字母
				this.isShowLetter = true; //显示点击的字母
				var that = this;
				setTimeout(function() {
					that.isShowLetter = false; //关闭
				}, 1000)
				this.scrollTopId = showLetter;
				this.character = e.currentTarget.dataset.index;
			},
			
						
			touchStart(e) {
				let pageY = e.touches[0].pageY
				let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight) 
				if (this.letter_list[index]) {
					this.scrollTopId = this.letter_list[index].name
				}
			},
			touchMove(e) {
				this.touch = true
				let pageY = e.touches[0].pageY
				let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight) 
				if (this.letter_list[index] && this.letter_list[index].name === this.scrollTopId) {
					return false
				}
				if (this.letter_list[index]) {
					this.scrollTopId = this.letter_list[index].name
				} 
				this.character = index
				
				
			},
			touchEnd(e) {
				this.touch = false
				this.$set(this,'scrollTopId',this.scrollTopId)
				this.scrollTopId = this.scrollTopId;
			},
			
			async getAddressListfun() {
				let city = await surnameList({
					
				})
				// console.info(city,"city");
				if(city){
					this.cityList = city.data;
					this.Letter_id  = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","W","X","Y","Z"];
					let city_list_main = this.city_list_main;
					
					this.cityList.forEach((item, index) => {
						let FirstStr = item.EnglishAbb[0];
						item.cityIndex = index;
						// console.info("FirstStr",FirstStr);
						city_list_main[FirstStr].push(item);
					})
					this.city_list_main = city_list_main;
					this.setList();//计算~
				}

			},

			//选择
			bindcitys(items) {
				//选择完城市返回上一页
				
				if(this.source==1){//选择的 赋值直接返回
					uni.setStorageSync("select_surname_name", items.Surname);
					uni.setStorageSync("select_surname_index", items.cityIndex);
					this.city_id = items.ID;
					uni.setStorageSync("st_surname_id", this.city_id);
					uni.navigateBack({
					
					})
				}else if(this.source==2){//设置的直接返回
					console.info("设置姓氏");
					//设置姓氏
					updateUserinfo({
						surname_id:items.ID,
					}).then(res=>{
						if(res.code==1){
							setTimeout(()=>{
								uni.navigateBack({
								
								})
							},1500)	
						}
					})
				}	
			},
			tocall(){
				//判断用户是否授权(为了照顾我们的用户群体，让他们拒绝以后告诉他们，不然到时候点了什么反应都没有就会怪程序有问题)
				// #ifdef APP-PLUS
				let platform = this.ws.userPlatform ? this.ws.userPlatform:uni.getSystemInfoSync().platform
				if (platform == 'android'){
					checkPermission('您未开启权限，暂无法拨打电话',"android.permission.CALL_PHONE").then((bol) => {
						if(bol){
							//获取授权后，你需要调用的方法
							this.callnumber();
						}else{

						}    
					})
				}else{
					this.callnumber();
				}			
				// #endif
				
				// #ifndef APP-PLUS
				this.callnumber();
				// #endif
			},
			//打电话
			callnumber(){
				uni.makePhoneCall({
					phoneNumber: '17771454570' ,//仅为示例 17771454570
				});
			}
		}
	}
</script>


<style lang="scss">
	@import "./choice_surname.scss";
</style>